<template>
    <div>
      <div class="role-search">
        <Input placeholder="请输入角色名" style="width: 300px" v-model="formData.searchRoleName" clearable autofocus></Input>
        <Button type="info" style="margin-left:10px" @click="searchRole(0,10,formData.searchRoleName)">查询</Button>
        <Button type="error" style="margin-left:10px" >清空</Button>
      </div>
      <div class="role-add-batchDelete">
        <Button type="primary" style="margin-left: 10px" @click="addModalShow">新增角色</Button>
        <Modal v-model="modal.addModal" title="新增角色" @on-ok="addRole" @on-cancel="resetFormData">
          <Row style="font-size:15px":gutter="5">
            <Col span="4" style="text-align: center;line-height: 35px">角色名：</Col>
            <Col span="8">
              <Input placeholder="角色名" clearable v-model="formData.roleName"></Input>
            </Col>
          </Row>
          <br>
          <Row style="font-size:15px":gutter="5">
            <Col span="4" style="text-align: center;line-height: 35px">角色描述：</Col>
            <Col span="8">
              <Input placeholder="角色描述" clearable v-model="formData.description"></Input>
            </Col>
          </Row>
        </Modal>
        <Button type="error" style="margin-left: 10px" @click="batchDeleteRoles">批量删除</Button>
      </div>
      <Divider>角色列表</Divider>
      <div style="padding: 50px">
      <Table max-height="600" stripe border :columns="this.columns" :data="respData.data" ref="selection" @on-selection-change="getSelectList">
        <template slot-scope="{ row, index }" slot="action">
          <Button type="success" style="margin-right: 5px" @click="editModalShow(index)">编辑</Button>
          <Modal v-model="modal.editModal" title="编辑角色" @on-ok="editRole" @on-cancel="resetFormData">
            <Row style="font-size:15px":gutter="5">
              <Col span="4" style="text-align: center;line-height: 35px">角色名：</Col>
              <Col span="8">
                <Input placeholder="角色名" clearable v-model="formData.roleName"></Input>
              </Col>
            </Row>
            <br>
            <Row style="font-size:15px":gutter="5">
              <Col span="4" style="text-align: center;line-height: 35px">角色描述：</Col>
              <Col span="8">
                <Input placeholder="角色描述" clearable v-model="formData.description"></Input>
              </Col>
            </Row>
          </Modal>
          <Button type="error" style="margin-right: 5px" @click="transferModalShow(index)">分配权限</Button>
          <Modal v-model="modal.transferModal" @on-ok="assignPermissions">
            <Divider>{{formData.roleName+":"+formData.description}}</Divider>
            <Transfer style="margin-left: 30px" :data="formData.transferPermissionData" :target-keys="formData.permissionTargetKeys" :render-format="render1" @on-change="handleChange"></Transfer>
          </Modal>
        </template>
      </Table>
      <Page :total="respData.total" show-sizer show-elevator show-total @on-change="getCurrentPage"
            @on-page-size-change="getPageCount" style="margin-top: 50px"></Page>
      </div >
    </div>
</template>

<script>
    import RoleService from "../services/RoleService";
    import AuthPermissionService from "../services/AuthPermissionService";
    import PermissionService from "../services/PermissionService";
    import "video.js/dist/video-js.css";
    import 'vue-video-player/src/custom-theme.css'
    import "videojs-contrib-hls";

    export default {
        name: "RoleManageComponent",
        data() {
          return {
            roleService:null,
            authPermissionService:null,
            permissionService:null,
            formData:{
              searchRoleName:"",
              roleName:"",
              description: "",
              currentPage: 0,
              pageCount: 10,
              roleId:"",
              selectedRoles:[],
              transferRoleId:"",
              transferPermissionData:[],
              permissionTargetKeys:[]
            },
            modal:{
              addModal:false,
              batchDeleteModal:false,
              editModal:false,
              permissionModal:false,
              transferModal:false
            },
            columns: [
              {
                type: "selection",
                width: 60,
                align: "center"
              },
              {
                title: "角色名称",
                key: "roleName",
                align: "center"
              },
              {
                title: "描述",
                key: "description",
                align: "center"
              },
              {
                title: "创建时间",
                key: "createTime",
                align: "center"
              },
              {
                title: "操作",
                slot: "action",
                align: "center"
              }
            ],
            respData: {data:[], total:null},
            respPermissionData: {data:[], total:null},
          }
        },
      created(){
        this.init();
      },
      methods: {
        init(){
          this.roleService = new RoleService(this);
          this.permissionService = new PermissionService(this);
          this.authPermissionService = new AuthPermissionService(this);
          this.authPermissionService.roleAuth(function (_this, result) {
            if(result == false){
              _this.$router.push({path:'/noAuth'}) ;
            }
          });
          this.searchRole(0,10,'');
        },
        searchRole(currentPage, pageCount, roleName){
          let params = {
            "currentPage": currentPage + "",
            "pageCount": pageCount + "",
            "roleName" : roleName + ""
          };
          this.roleService.searchRole(params, function (_this, data) {
            _this.respData.data = data.data;
            _this.respData.total = data.page.total;
          });
        },
        addRole(){
          let params = {
            "roleName": this.formData.roleName,
            "description": this.formData.description
          };
          this.roleService.addRole(params);
        },
        editRole(){
          let params = {
            "id": this.formData.roleId,
            "roleName": this.formData.roleName,
            "description": this.formData.description
          };
          this.roleService.editRole(params);
        },
        batchDeleteRoles(){
          let selectedIds = [];
          this.formData.selectedRoles.forEach(function (role) {
            selectedIds.push(role.id);
          })
          // console.log(selectedIds);
          this.roleService.batchDeleteRoles(selectedIds);
        },
        assignPermissions(){
          let params = {
            "roleId": this.formData.transferRoleId,
            "permissionIds": this.formData.permissionTargetKeys
          };
          this.permissionService.assignPermissions(params);
        },
        addModalShow(){
          this.modal.addModal=true;
        },
        editModalShow(index){
          this.formData.roleName = this.respData.data[index].roleName;
          this.formData.description = this.respData.data[index].description;
          this.formData.roleId = this.respData.data[index].id;
          // console.log(this.formData.roleId);
          this.modal.editModal=true;
        },
        transferModalShow(index){
          this.formData.transferRoleId = this.respData.data[index].id;
          this.formData.roleName = this.respData.data[index].roleName;
          this.formData.description = this.respData.data[index].description;
          this.getTransferPermissionData();
          this.getPermissionTargetKeys();
          this.modal.transferModal=true;
        },
        resetFormData(){
          this.formData.searchRoleName = "";
          this.formData.roleName = "";
          this.formData.description = "";
        },
        getCurrentPage(num){
          this.formData.currentPage = num-1;
          this.searchRole(this.formData.currentPage, this.formData.pageCount, this.formData.roleName);
        },
        getPageCount(pageSize){
          this.formData.pageCount = pageSize;
          this.searchRole(this.formData.currentPage, this.formData.pageCount, this.formData.roleName);
        },
        getSelectList(selection){
          this.formData.selectedRoles = selection;
        },
        getTransferPermissionData(){
          let params = {
            "currentPage": "0",
            "pageCount": "100",
            "permissionName" : ""
          };
          this.permissionService.searchPermission(params, function (_this, data) {
            _this.respPermissionData.data = data.data;
            _this.formData.transferPermissionData = [];
            _this.respPermissionData.data.forEach(function(permission){
              let transferDataTemp = {"key":permission.id+"", "label":permission.permissionName};
              _this.formData.transferPermissionData.push(transferDataTemp);
            });
            // console.log(_this.formData.transferPermissionData);
          });
        },
        getPermissionTargetKeys(){
          let params = {
            "currentPage": "0",
            "pageCount": "100",
            "roleId" : this.formData.transferRoleId+"",
          };
          this.permissionService.getPermissionsByRole(params, function (_this, data) {
            _this.respPermissionData.data = data.data;
            _this.formData.permissionTargetKeys = [];
            _this.respPermissionData.data.forEach(function(permission){
              _this.formData.permissionTargetKeys.push(permission.id+"");
            })
            // console.log(_this.formData.permissionTargetKeys);
          });
        },
        render1 (item) {
          return item.label;
        },
        handleChange (newTargetKeys, direction, moveKeys) {
          // console.log(newTargetKeys);
          // console.log(direction);
          // console.log(moveKeys);
          this.formData.permissionTargetKeys = newTargetKeys;
        }
      }
    }
</script>

<style scoped>
  .role-search {
    margin-top: 20px;
    margin-left: 20px;
    display: flex;
  }
  .role-add-batchDelete {
    margin-top: 20px;
    margin-left: 20px;
    display: flex;
  }
</style>
